<template>
	<view class="team">
		<Hearder :name="'团队成员'"></Hearder>
		<view class="content">
			<view class="every" v-for="item in userlist" :key="item.member_id">
				<view class="left clearfix">
					<image :src="item.avatarUrl"></image>
					<view>
						<view>
							{{item.nickName}}
							<text v-if="item.p_type=='间推'">{{item.p_type}}</text>
							<text class="zhitui" v-if="item.p_type=='直推'">{{item.p_type}}</text>
						</view>
						<view>邀请人：{{item.p_nickName}}</view>
					</view>
				</view>
				<view class="right">
					<view>资产：{{item.consumption_amount}}</view>
					<view>{{item.create_time}}加入</view>
				</view>
			</view>
		</view>
		<u-skeleton
			rows="4"
			:title="false"
			:loading="loading"
			:rowsHeight="['102rpx', '706rpx', '100rpx', '200rpx']"
			:rowsWidth="['100%', '100%', '100%', '100%']"
			animate
		></u-skeleton>
		<view class="nidata" v-if="userlist.length==0">
			<image src="../../static/images/noimg.png"></image>
		</view>
		<shopro-login-modal :showLogin="showLogin" @loginhidden="loginhidden"></shopro-login-modal>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				userlist:[],
				showLogin:false,
				loading:true
			}
		},
		onLoad() {
			this.request('/member/getMyIndirection').then(res => {
				if(res.data.code==-500){
					this.showLogin=true
				}
				if(res.data.code == 1){
					this.userlist = res.data.data
				}
				this.loading = false;
			})
		},
		methods:{
			loginhidden(data){
				this.showLogin=data
			}
		}
	}
</script>

<style scoped lang="scss">
	.team{
		.content{
			margin: 0 4%;
			.every{
				display: flex;
				justify-content: space-between;
				border-bottom: $uni-border-bottom;
				padding: 30rpx 0 14rpx;
				.left{
					image{
						float: left;
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
					}
					>view{
						float: left;
						margin-left: 20rpx;
						view{
							&:first-of-type{
								font-size: 28rpx;
								text{
									font-size: 20rpx;
									color: #fff;
									background: linear-gradient(to top,#FE6D03,#FE8103);
									padding: 0 14rpx;
									border-radius: 4rpx;
									margin-left: 14rpx;
								}
								.zhitui{
									background: linear-gradient(to top,#2871F7,#4A8AFF);
								}
							}
							&:last-of-type{
								font-size: 22rpx;
								color: #999;
								margin-top: 10rpx;
							}
						}
					}
				}
				.right{
					view{
						text-align: right;
						font-size: 22rpx;
						margin-top: 4rpx;
						&:last-of-type{
							margin-top: 10rpx;
							color: #999;
						}
					}
				}
			}
		}
	}
</style>
